﻿@using LView.CMS.Models;
@model LExam;

<div class="layui-form">
    <div class="layui-col-lg8">
        @{
            var singleChooseQuestions = Model.ExamQuestions.Where(x => x.Type == 0);
            var mutliChooseQuestions = Model.ExamQuestions.Where(x => x.Type == 1);
            var trueOrFalseQuestions = Model.ExamQuestions.Where(x => x.Type == 2);
            var count = 1;
        }
        @if (singleChooseQuestions.Count() > 0)
        {
            <div class="layui-row layui-col-space10 singleQuesArea">
                <blockquote class="layui-elem-quote title">
                    <h2>单选题</h2>
                </blockquote>
                <div class="layui-elem-quote layui-quote-nm magb0">
                    @{
                        System.Text.ASCIIEncoding asciiEncoding = new System.Text.ASCIIEncoding();
                    }
                    @foreach (var item in singleChooseQuestions)
                    {
                        <div class="layui-row singleEveryQuestion">
                            <h3>@count . @item.Name</h3>
                            <input type="hidden" name="QuestionId" value="@item.Id" />
                            <input type="hidden" name="QuestionScore" value="@item.Score" />
                            @foreach (var option in item.ExamOption)
                            {
                                var examOptionsIdx = item.ExamOption.IndexOf(option) + 1;
                                string optionFlag = asciiEncoding.GetString(new byte[] { (byte)(examOptionsIdx + 64) });
                                <div class="layui-row" style="padding-left:40px">
                                    <label class="layui-field-title layui-col-space10">@optionFlag : @option.Name</label>
                                </div>
                            }
                            <div class="layui-row layui-form-item" style="padding-left:5px">
                                @foreach (var option in item.ExamOption)
                                {
                                    var examOptionsIdx = item.ExamOption.IndexOf(option) + 1;
                                    string optionFlag = asciiEncoding.GetString(new byte[] { (byte)(examOptionsIdx + 64) });
                                    <input type="checkbox" lay-filter="choose" name="singleOptions" title="@optionFlag">
                                    <input type="hidden" name="@optionFlag" value="@option.Id" />
                                }
                            </div>
                        </div>
                        count += 1;
                    }
                </div>
            </div>
        }
        @if (mutliChooseQuestions.Count() > 0)
        {
            <div class="layui-row layui-col-space10 mutliQuesArea">
                <blockquote class="layui-elem-quote title">
                    <h2>多选题</h2>
                </blockquote>
                <div class="layui-elem-quote layui-quote-nm magb0">
                    @{
                        System.Text.ASCIIEncoding asciiEncoding = new System.Text.ASCIIEncoding();
                    }
                    @foreach (var item in mutliChooseQuestions)
                    {
                        <div class="layui-row mutliEveryQuestion">
                            <h3>@count . @item.Name</h3>
                            <input type="hidden" name="QuestionId" value="@item.Id" />
                            <input type="hidden" name="QuestionScore" value="@item.Score" />
                            @foreach (var option in item.ExamOption)
                            {
                                var examOptionsIdx = item.ExamOption.IndexOf(option) + 1;
                                string optionFlag = asciiEncoding.GetString(new byte[] { (byte)(examOptionsIdx + 64) });
                                <div class="layui-row" style="padding-left:40px">
                                    <label class="layui-field-title layui-col-space10">@optionFlag : @option.Name</label>
                                </div>
                            }
                            <div class="layui-row layui-form-item" style="padding-left:5px">
                                @foreach (var option in item.ExamOption)
                                {
                                    var examOptionsIdx = item.ExamOption.IndexOf(option) + 1;
                                    string optionFlag = asciiEncoding.GetString(new byte[] { (byte)(examOptionsIdx + 64) });
                                    <input type="checkbox" lay-filter="choose" title="@optionFlag">
                                    <input type="hidden" name="@optionFlag" value="@option.Id" />
                                }
                            </div>
                        </div>
                        count += 1;
                    }
                </div>
            </div>
        }
        @if (trueOrFalseQuestions.Count() > 0)
        {
            <div class="layui-row layui-col-space10 trueOrFalseQuesArea">
                <blockquote class="layui-elem-quote title">
                    <h2>判断题</h2>
                </blockquote>
                <div class="layui-elem-quote layui-quote-nm magb0">
                    @{
                        System.Text.ASCIIEncoding asciiEncoding = new System.Text.ASCIIEncoding();
                    }
                    @foreach (var item in trueOrFalseQuestions)
                    {
                        <div class="layui-row trueOrFalseEveryQuestion">
                            <h3>@count . @item.Name</h3>
                            <input type="hidden" name="QuestionId" value="@item.Id" />
                            <input type="hidden" name="QuestionScore" value="@item.Score" />
                            @foreach (var option in item.ExamOption)
                            {
                                var examOptionsIdx = item.ExamOption.IndexOf(option) + 1;
                                string optionFlag = asciiEncoding.GetString(new byte[] { (byte)(examOptionsIdx + 64) });
                                <div class="layui-row" style="padding-left:40px">
                                    <label class="layui-field-title layui-col-space10">@optionFlag : @option.Name</label>
                                </div>
                            }
                            <div class="layui-row layui-form-item" style="padding-left:5px">
                                @foreach (var option in item.ExamOption)
                                {
                                    var examOptionsIdx = item.ExamOption.IndexOf(option) + 1;
                                    string optionFlag = asciiEncoding.GetString(new byte[] { (byte)(examOptionsIdx + 64) });
                                    <input type="checkbox" lay-filter="choose" title="@optionFlag">
                                    <input type="hidden" name="@optionFlag" value="@option.Id" />
                                }
                            </div>
                        </div>
                        count += 1;
                    }
                </div>
            </div>
        }
    </div>
    <div class="layui-col-lg4 answerSheet">
        <div class="layui-row layui-col-space10 answerSheetRow">
            <blockquote class="layui-elem-quote title layui-row">
                <h2>答题卡<label> (共 @Model.ExamQuestions.Count()题)</label></h2>
            </blockquote>
            <div class="layui-elem-quote layui-quote-nm magb0">
                <div class="layui-row layui-form-item" style="padding-left:5px">
                    @foreach (var item in Model.ExamQuestions)
                    {
                        <input type="checkbox" name="@(Model.ExamQuestions.ToList().IndexOf(item)+1)" title="@(Model.ExamQuestions.ToList().IndexOf(item)+1)">
                    }
                </div>
                <div class="layui-center">
                    <a class="layui-btn layui-btn-normal submitAnswer"><i class="layui-icon">&#xe609;</i>提交试卷</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="~/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form', 'layer'], function () {
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery;

    AnswerSheetRelocation();

    window.onresize = function () {
        AnswerSheetRelocation();
    }

    function AnswerSheetRelocation() {
        if ($(window).width() < 1200) {
            $(".answerSheet").css('position', '');
            $(".answerSheetRow").css('position', 'absolute');
            $(".answerSheetRow").css('padding', '20px 20px 20px 20px');
        } else {
            $(".answerSheetRow").css('padding', '');
            $(".answerSheet").css("position", "fixed");
            $(".answerSheet").css('right', '0px');
            $(".answerSheet").css('padding-right', '1px');
            $(".answerSheetRow").css('padding-left', '10px');
        }
    }

        form.on('checkbox(choose)', function (data) {
            //如下进行计算点击题目索引，以便进行答题卡标记
            var singleArea = $(".singleQuesArea").find('.singleEveryQuestion');
            var mutliArea = $(".mutliQuesArea").find('.mutliEveryQuestion');
            var trueOrFalseArea = $(".trueOrFalseQuesArea").find('.trueOrFalseEveryQuestion');
            var index = 0;
            var questionArea = $(this).parent().parent().parent().parent();
            if (questionArea.hasClass("singleQuesArea")) {
                index = singleArea.index($(this).parent().parent());
            } else if (questionArea.hasClass("mutliQuesArea")) {
                index = singleArea.length + mutliArea.index($(this).parent().parent());
            } else {
                index = singleArea.length + mutliArea.length + trueOrFalseArea.index($(this).parent().parent());
            }

            if (data.elem.checked) {//判断当前多选框是选中还是取消选中,来自动对答题卡区域进行标记
                $(".answerSheetRow").find(".layui-form-checkbox").eq(index).addClass("layui-form-checked");
                console.log('您点击了第' + Number(index + 1) + '题');
            } else {
                if ($(this).parent().parent().find(".layui-form-checked").length == 0)
                {
                    $(".answerSheetRow").find(".layui-form-checkbox").eq(index).removeClass("layui-form-checked");
                }
            }
        });

    var optionsMsg = "";
    var questionInfo = [];
    var question1JsonArr = [];
    $(".submitAnswer").click(function () {
        layer.confirm("确认提交试卷吗？",
            {
                btn: ['Yes', 'No'],
                yes: function (index, layero) {
                    question1JsonArr = [];
                    var singleEveryQuestion = $(".singleEveryQuestion");
                    var mutliEveryQuestion = $(".mutliEveryQuestion");
                    var trueOrFalseEveryQuestion = $(".trueOrFalseEveryQuestion");
                    $.each(singleEveryQuestion, function (i) {
                        var everyQuestionOptions = [];
                        var everyQuestionId = $(this).find('input[name="QuestionId"]').val();
                        var everyQuestionScore = $(this).find('input[name="QuestionScore"]').val();
                        var everyQuesOptionsBox = $(this).find(".layui-form-item").find(".layui-form-checked");
                        $.each(everyQuesOptionsBox, function (i, data) {
                            var optionsName = $(this).find('span').text();
                            var optionsVal = $(this).parent().find('input[name="' + optionsName + '"]').val();
                            everyQuestionOptions.push(optionsVal);
                        });
                        var everyQuestionJsonObject = { "QuestionId": everyQuestionId, "QuestionScore": everyQuestionScore, "Type": "0", "QuestionChooseIds": everyQuestionOptions };
                        question1JsonArr.push(everyQuestionJsonObject);
                    });
                    $.each(mutliEveryQuestion, function (i) {
                        var everyQuestionOptions = [];
                        var everyQuestionId = $(this).find('input[name="QuestionId"]').val();
                        var everyQuestionScore = $(this).find('input[name="QuestionScore"]').val();
                        var everyQuesOptionsBox = $(this).find(".layui-form-item").find(".layui-form-checked");
                        $.each(everyQuesOptionsBox, function (i, data) {
                            var optionsName = $(this).find('span').text();
                            var optionsVal = $(this).parent().find('input[name="' + optionsName + '"]').val();
                            everyQuestionOptions.push(optionsVal);
                        });
                        var everyQuestionJsonObject = { "QuestionId": everyQuestionId, "QuestionScore": everyQuestionScore, "Type": "1", "QuestionChooseIds": everyQuestionOptions };
                        question1JsonArr.push(everyQuestionJsonObject);
                    });
                    $.each(trueOrFalseEveryQuestion, function (i) {
                        var everyQuestionOptions = [];
                        var everyQuestionId = $(this).find('input[name="QuestionId"]').val();
                        var everyQuestionScore = $(this).find('input[name="QuestionScore"]').val();
                        var everyQuesOptionsBox = $(this).find(".layui-form-item").find(".layui-form-checked");
                        $.each(everyQuesOptionsBox, function (i, data) {
                            var optionsName = $(this).find('span').text();
                            var optionsVal = $(this).parent().find('input[name="' + optionsName + '"]').val();
                            everyQuestionOptions.push(optionsVal);
                        });
                        var everyQuestionJsonObject = { "QuestionId": everyQuestionId, "QuestionScore": everyQuestionScore, "Type": "2", "QuestionChooseIds": everyQuestionOptions };
                        question1JsonArr.push(everyQuestionJsonObject);
                    });
                    console.log(question1JsonArr);
                    $.ajax({
                        type: 'POST',
                        url: '/MyTask/SubmitAnswer/',
                        data: {
                            examId: '@Model.Id',  //主键
                            TaskId: '@ViewData["taskId"]',
                            CourseId: '@ViewData["courseId"]',
                            answerInfoDetails: question1JsonArr
                        },
                        dataType: "json",
                        headers: {
                            "X-CSRF-TOKEN-Gerald": $("input[name='AntiforgeryKey_Gerald']").val()
                        },
                        success: function (res) {//res为相应体,function为回调函数
                            var alertIndex;
                            if (res.ResultCode === 0) {
                                alertIndex = layer.alert(res.ResultMsg, { icon: 1 }, function () {
                                    layer.closeAll("iframe");
                                    //刷新父页面
                                    top.layer.close(alertIndex);
                                });
                            } else if (res.ResultCode === 102) {
                                alertIndex = layer.alert(res.ResultMsg, { icon: 5 }, function () {
                                    layer.closeAll("iframe");
                                    //刷新父页面
                                    parent.location.reload();
                                    top.layer.close(alertIndex);
                                });
                            }
                            else {
                                layer.alert(res.ResultMsg, { icon: 5 });
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            layer.alert('操作失败！！！' + XMLHttpRequest.status + "|" + XMLHttpRequest.readyState + "|" + textStatus, { icon: 5 });
                        }
                    });
                }, btn2: function (index, layero) {
                    alert("11111");
                    return false;
                }, cancel: function () {
                }
            });
    });
});
</script>